import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
	// 默认加载方式
	// {
	//   path: '/',
	//   name: 'Home',
	//   component: Home
	// },

	//路由重定向
	{path: "/", redirect: "/recommend"},
	// 按需加载方式
	{
		path: '/rank',
		name: 'Rank',
		component: () => import('../views/Rank.vue'),
		children: [
			{
				path: 'detail/:id/:type',
				component: () => import("../views/Detail.vue"),
			}
		]
	},
	{
		path: '/recommend',
		name: 'Recommend',
		component: () => import('../views/Recommend.vue'),
		children: [
			{
				path: 'detail/:id/:type',
				component: () => import("../views/Detail.vue"),
			}
		]
	},
	{
		path: '/search',
		name: 'Search',
		component: () => import('../views/Search.vue'),
	},
	{
		path: '/singer',
		name: 'Singer',
		component: () => import('../views/Singer.vue'),
		children: [
			{
				path: 'detail/:id/:type',
				component: () => import("../views/Detail.vue"),
			}
		]
	},
	{
		path: '/account',
		name: 'Account',
		component: () => import('../views/Account.vue')
	},
]

const router = new VueRouter({
	// 预渲染必须使用  history 模式
	mode: 'history',
	// mode: 'hash',
	/*
	使用 history 模式打包上架之后, 刷新会出现 404 错误
	解决方案 :
	1. 更改模式为 hash
	2. 服务端重定向
	*/
	base: process.env.BASE_URL,
	routes
})

export default router
